<template>
    <div>
        <div class="flx">
            <Card class="car1">
                <Spin fix v-if="treeLoading"></Spin>
                <Tree :data="data1" @on-select-change="clic" ref="tree"></Tree>
            </Card>
            <Card class="car2">
                <Tabs v-model="tabname">
                    <TabPane label="用户列表" name="name1">
                        <Row>
                            <Form :model="selectObj" inline>
                                <FormItem>
                                    <Input v-model="selectObj.login_name" clearable placeholder="登录名"/>
                                </FormItem>
                                <FormItem>
                                    <Input v-model="selectObj.mobile" clearable placeholder="手机号"/>
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" @click="selectmsg()">搜索</Button>
                                </FormItem>
                            </Form>
                        </Row>
                        <Table :loading="tableLoading" border :columns="columns7" :data="data6">
                            <template slot-scope="{ row }" slot="action">
                                <Button type="primary" size="small" @click="update(row)" style="margin-right: 5px">修改
                                </Button>
                                <Button type="error" size="small">删除</Button>
                            </template>
                        </Table>
                        <div class="page">
                            <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize"
                                  @on-change="change"/>
                        </div>
                    </TabPane>
                    <template v-if="this.type==='1'">
                        <TabPane label="用户添加" name="name2">
                            <user-form :treeID="treeID" :treeIDName="treeIDName" :btnlist="btnlist"
                                       @cancel="qiehuan"></user-form>
                        </TabPane>
                    </template>
                    <template v-if="this.type==='2'">
                        <TabPane label="用户修改" name="name3">
                            <Form ref="formInline" :model="obj" :label-width="90">
                                <FormItem label="归属公司：">
                                    <Input v-model="obj.company_name" :placeholder="this.obj.company_name" disabled
                                           class="wid"></Input>
                                </FormItem>
                                <FormItem label="登录手机：">
                                    <Input v-model="obj.mobile" placeholder="登录手机号" class="wid"></Input>
                                </FormItem>
                                <FormItem label="登录名：">
                                    <Input v-model="obj.login_name" placeholder="登录名" class="wid"></Input>
                                </FormItem>
                                <FormItem label="工号：">
                                    <Input v-model="obj.no" maxlength="20" placeholder="工号" class="wid"></Input>
                                </FormItem>
                                <FormItem label="姓名：">
                                    <Input v-model="obj.name" placeholder="姓名" class="wid"></Input>
                                </FormItem>
                                <FormItem label="密码：">
                                    <Input v-model="obj.password" maxlength="20" type="password" placeholder="密码"
                                           class="wid"></Input>
                                </FormItem>
                                <FormItem label="确认密码：">
                                    <Input v-model="obj.passwordc" maxlength="20" type="password" placeholder="确认密码"
                                           class="wid"></Input>
                                </FormItem>
                                <FormItem label="邮箱：">
                                    <Input v-model="obj.email" placeholder="邮箱" class="wid"></Input>
                                </FormItem>
                                <FormItem label="电话：">
                                    <Input v-model="obj.phone" placeholder="电话" class="wid"></Input>
                                </FormItem>
                                <FormItem label="允许登录：">
                                    <i-switch v-model="obj.login_flag" true-value="1" false-value="0" size="large">
                                        <span slot="1">On</span>
                                        <span slot="0">Off</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="用户类型：">
                                    <Select v-model="obj.user_type" class="wid">
                                        <Option value="1">系统管理</Option>
                                        <Option value="2">部门经理</Option>
                                        <Option value="3">普通用户</Option>
                                        <Option value="9">接口对接</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="用户角色：">
                                    <CheckboxGroup v-model="border">
                                        <Checkbox v-for="(item,index) in btnlist" :key="index" :label="item.name"
                                                  border>{{item.name}}
                                        </Checkbox>
                                    </CheckboxGroup>
                                </FormItem>
                                <FormItem label="备注：">
                                    <Input v-model="obj.remarks" type="textarea" class="wid" placeholder=""/>
                                </FormItem>
                                <FormItem label="备注：">
                                    <span class="lef">时间：{{obj.update_date}}</span>
                                </FormItem>
                            </Form>
                            <div>
                                <Button class="clic" type="primary" shape="circle" @click="updateadd(obj)">保存</Button>
                                <Button class="ml20" shape="circle" @click="updatequxiao">取消</Button>
                            </div>
                        </TabPane>
                    </template>
                </Tabs>
            </Card>
        </div>
    </div>
</template>

<script>
import {
  getForUserList,
  getList,
  getUserList,
  setUserInfo,
  userIdGetAdminUserInfo
} from '../../../api/system/system'
import UserForm from './components/user-form'

export default {
  name: 'WlUserManager',
  components: { UserForm },
  data () {
    return {
      treeLoading: false,
      tableLoading: false,
      btnlist: [],
      treelist1: {},
      title: '',
      logic: '',
      type: '1',
      tabname: '',
      compan_name: '',
      treelist: [],
      disabled: false,
      currentPageNo: 1,
      currentPageSize: 20,
      totalnum: 0,
      obj: {},
      rolelist: [],
      selectObj: {},
      border: [],
      columns7: [
        {
          title: '归属公司',
          key: 'company_name',
          align: 'center'
        },
        {
          title: '登录名',
          key: 'login_name',
          align: 'center'
        },
        {
          title: '名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '手机',
          key: 'mobile',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      treeID: '',
      treeIDName: '',
      data6: [],
      data1: [],
      dataList: [],
      updaterow: {}
    }
  },
  methods: {
    //  取消按钮
    qiehuan () {
      this.tabname = 'name1'
      // console.log(this.tabname)
    },
    updatequxiao () {
      this.type = '1'
      this.tabname = 'name1'
    },
    //  修改按钮
    update (value) {
      this.border = []
      this.type = '2'
      this.tabname = 'name3'
      value.contain_role = '1'
      userIdGetAdminUserInfo(value).then(ret => {
        let result = ret.data
        if (result.errcode === 0) {
          this.rolelist = []
          this.getForUserList()
          this.obj = ret.data.data
          this.updaterow = ret.data.data
          if (result.data.rolelist) {
            result.data.rolelist.forEach(item => {
              this.border.push(item.name)
            })
          }
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    //  搜索
    selectmsg () {
      let data = {
        id: this.treeID,
        loginname: this.selectObj.login_name,
        mobile: this.selectObj.mobile,
        pageSize: this.currentPageSize
      }
      this.tableLoading = true
      getUserList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data6 = ret.data.data.results
          this.totalnum = ret.data.data.totalRecord
          this.tableLoading = false
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
          this.tableLoading = false
        }
      })
    },
    //  分页
    change (pageNo) {
      this.currentPageNo = pageNo
      this.currentPageSize = 20
      this.clic()
    },
    //  树状图
    clic (data) {
      if (data.length > 0) {
        this.tabname = 'name1'
        this.treeID = data[0].id
        this.treeIDName = data[0].name
        // console.log(this.treeID, this.treeIDName)
        let data1 = {
          id: this.treeID,
          pageNo: this.currentPageNo,
          pageSize: this.currentPageSize
        }
        this.tableLoading = true
        getUserList(data1).then(ret => {
          if (ret.data.errcode === 0) {
            this.data6 = ret.data.data.results
            this.totalnum = ret.data.data.totalRecord
            this.getForUserList()
            this.tableLoading = false
          } else {
            this.$Notice.error({
              title: '失败',
              desc: ret.data.errmsg
            })
            this.tableLoading = false
          }
        })
      }
    },
    //  树状图处理数据
    tree () {
      this.data1 = this.$common.toTree(this.treelist, 'children', 'id', 'parent_id')
      this.treeID = this.data1[0].id
      this.treeIDName = this.data1[0].name
    },
    //  获取树状图数据
    init () {
      let data = {}
      this.treeLoading = true
      getList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.treelist = ret.data.data
          for (let i = 0; i < this.treelist.length; i++) {
            this.treelist[i].title = this.treelist[i].name
          }
          this.tree()
          this.compan_name = this.treelist[0].name
          this.obj.company_name = this.compan_name
          this.getForUserList()
          this.treeLoading = false
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
          this.treeLoading = false
        }
      })
    },
    //  添加用户--用户角色数据
    getForUserList () {
      let data = {
        flag: '1',
        company_id: this.treeID
      }
      getForUserList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.btnlist = ret.data.data
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    // 修改用户信息确定按钮
    updateadd (obj) {
      // console.log()
      if (this.obj.mobile === null || this.obj.mobile === '' || this.obj.mobile === undefined) {
        this.$Message.info('请填写手机号码！')
        return
      }
      var reg = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
      if (reg.test(this.obj.mobile) === false) {
        this.$Message.info('请输入正确手机号！')
        this.obj.mobile = ''
      }
      if (this.obj.name === null || this.obj.name === '' || this.obj.name === undefined) {
        this.$Message.info('请填写姓名！')
        return
      }
      // if (this.obj.password === null || this.obj.password === '' || this.obj.password === undefined) {
      //  this.$Message.info('请填写密码！')
      //  return
      // }
      // if (this.obj.passwordc === null || this.obj.passwordc === '' || this.obj.passwordc === undefined) {
      //  this.$Message.info('请再次填写密码！')
      //  return
      // }
      if (this.obj.passwordc !== this.obj.password) {
        this.$Message.info('两次密码不相同！')
        return
      }
      if (this.obj.user_type) {
        this.logic = '1'
      } else {
        this.logic = '2'
      }
      this.border.forEach(item => {
        this.btnlist.forEach(item1 => {
          if (item === item1.name) {
            this.rolelist.push(item1)
          }
        })
      })

      this.rolelist.forEach(item2 => {
        item2.active = true
      })
      let data = {
        id: this.updaterow.id,
        company_id: this.treeID,
        company_name: this.obj.company_name,
        email: this.obj.email,
        login_flag: this.logic,
        mobile: this.obj.mobile,
        name: this.obj.name,
        password: this.obj.password,
        passwordc: this.obj.passwordc,
        phone: this.obj.phone,
        remarks: this.obj.remarks,
        rolelist: this.rolelist,
        user_type: this.obj.user_type
      }
      // console.log(data)
      setUserInfo(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({
            title: ret.data.data.Message,
            desc: ret.data.data,
            duration: 0
          })
          this.updatequxiao()
          this.$emit('cancel')
          this.obj = {}
          this.border = []
        } else {
          this.$Notice.error({
            title: '失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .flx {
        display: flex;
    }

    .wid {
        width: 70%;
    }

    .car1 {
        width: 25%;
    }

    .car2 {
        margin-left: 50px;
        width: 70%
    }

    .ml20 {
        margin-left: 20px;
    }

    .clic {
        margin-left: 100px;
    }

    .m10 {
        margin-left: 5px;
    }

    .page {
        margin-top: 10px;
        text-align: right;
    }

    .lef {
        margin-left: 150px;
    }
</style>
